<template>
    <div class="app-container">
        <!-- 查询栏 -->
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable size="small"
                          style="width: 240px" @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="角色编码" prop="roleCode">
                <el-input v-model="queryParams.roleCode" placeholder="请输入角色编码" clearable size="small"
                          style="width: 240px" @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                           v-hasPermi="['RoleCtrl:add']">新增角色
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-drawer title="角色维护" :visible.sync="addOpen" direction="rtl" :destroy-on-close="true" size="500px">
            <add-role @submitForm="initList" @cancelDialog="addCancel"/>
        </el-drawer>
        <el-drawer title="授权配置" :destroy-on-close="true" ref="navDrawer"  :visible.sync="grantOpen" direction="rtl"
                   size="45%">
            <grant-auth :roleCode="roleCode" @submitForm="initList" @cancelDialog="grantCancel"/>
        </el-drawer>
        <el-drawer title="人员配置" :destroy-on-close="true" ref="userDrawer" :visible.sync="userOpen" direction="rtl"
                   size="460px">
            <user-auth :roleCode="roleCode" :accountList="accountList" :roleName="roleName" @submitForm="initList" @cancelDialog="userCancel"/>
        </el-drawer>

        <!-- 列表数据 -->
        <el-table v-loading="loading" :data="roleList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false"/>
            <el-table-column label="角色名称" align="center" prop="roleName" :show-overflow-tooltip="true"/>
            <el-table-column label="角色代码" align="center" prop="roleCode" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="creationDate" :show-overflow-tooltip="true" width="160"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">
                        页面配置
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDataScope(scope.row.id)">
                        删除角色
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleUser(scope.row)">
                        人员配置
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页插件 -->
        <pagination
                v-show="roleList.length>0"
                :total="roleList.length"
                :page.sync="currentPage"
                :limit.sync="pageSize"
        />
    </div>
</template>

<script>
    import {getallrole, delRole, searchRole, getSinglePage} from '@/api/platform/role'
    import addRole from "@/views/platformctrl/roleCtrl/components/addRole";
    import grantAuth from "@/views/platformctrl/roleCtrl/components/grantAuth";
    import userAuth from "@/views/platformctrl/roleCtrl/components/userAuth";
    import {getAllAccount} from "@/api/platform/account";

    export default {
        name: "RoleCtrl",
        components: {
            grantAuth,
            addRole,
            userAuth
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 显示搜索条件
                showSearch: true,
                // 角色代码
                roleCode: undefined,
                roleName: undefined,
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 角色表格数据
                roleList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                addOpen: false,
                grantOpen: false,
                userOpen: false,
                // 查询栏属性
                queryParams: {
                    roleName: undefined,
                    roleCode: undefined
                },
                // 所有账号
                accountList: [],
            };
        },
        created() {
            // 初始化角色
            this.initList();
            // 初始化所有用户
            this.listUsers();
        },
        methods: {
            // 初始化角色
            initList() {
                this.getList({'id': ''});
            },
            // 查询所有角色
            getList(data) {
                this.loading = true;
                searchRole({searchParams: data}).then(
                    response => {
                        this.roleList = response.responseBody;
                        this.loading = false;
                    }
                );
            },

            // 查询所有用户
            listUsers() {
                this.loading = true
                getAllAccount({
                    'searchParams': {
                        'id': ''
                    }
                }).then(res => {
                    this.loading = false
                    this.accountList = res.responseBody
                }).catch(err => {
                    this.loading = false
                })
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.getList(this.queryParams);
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增角色按钮 */
            handleAdd() {
                this.addOpen = true;
            },
            // 页面权限设置
            handleUpdate(row) {
                this.roleCode = row.roleCode;
                this.grantOpen = true;
            },

            // 人员配置
            handleUser(row) {
                this.roleCode = row.roleCode;
                this.roleName = row.roleName;
                this.userOpen = true;
            },

            handleDataScope(id) {
                this.$confirm('确定要删除吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then( () => {
                    delRole(id).then(res => {
                        if (res.retCode === '200') {
                            this.msgSuccess('删除成功')
                            this.initList();
                        } else {this.$message.error('删除失败' + res.retCode)}
                    })
                }).catch(() => {})
            },
            addCancel() {
                this.addOpen = false;
            },
            // 关闭页面配置
            grantCancel() {
                this.grantOpen = false;
                this.$refs.navDrawer.closeDrawer();
                this.resetQuery();
            },
            userCancel() {
                this.userOpen = false;
                this.$refs.userDrawer.closeDrawer();
                this.resetQuery();
            }
        }
    };
</script>
